<!-- 全部订单页面1。该页面属于正常的Vue页面，正常书写代码结构，但对于订单列表这种页面来说页面性能不太好， -->
<template>
  <view v-if="shenheStatus == 0" class="page">
    <view class="comment-box" v-if="goods_list">
      <view
        class="comment-item"
        v-for="(item, index) in goods_list"
        :key="index"
      >
        <view class="goods-info">
          <image :src="item.goods_pic" mode=""></image>
          <u-rate
            :count="5"
            v-model="goods_list[index].score"
            :size="45"
            active-color="#f84e18"
            inactive-color="#f2f2f2"
            :inactive-icon="'star-fill'"
          ></u-rate>
        </view>
        <view class="comment-content">
          <view style="font-size: 34rpx"> {{ $t("order.comment") }}： </view>
          <view style="width: 70%">
            <textarea
              style="padding: 10rpx"
              v-model="goods_list[index].content"
              :placeholder="$t('admin.noComment')"
            />
          </view>
        </view>
        <view class="comment-content">
          <view
            class="comment-pic"
            style="position: relative"
            v-for="(pic, pic_index) in goods_list[index].pic_list"
            :key="pic_index"
            v-if="goods_list[index].pic_list.length > 0"
          >
            <image :src="pic" mode="aspectFill"></image>
            <u-icon
              @click="delPic(index, pic_index)"
              :size="30"
              name="close"
              style="color: red; position: absolute; top: 0; right: 0"
            ></u-icon>
          </view>
          <view
            class="comment-pic"
            @click="chooseImage(index)"
            v-if="goods_list[index].pic_list.length < 6"
          >
            <u-icon :size="80" name="photo"></u-icon>
            {{ $t("home.upload") }}
          </view>
        </view>
      </view>
      <view class="comment-submit" @click="submitComment()">
        {{ $t("home.submit") }}
      </view>
    </view>
    <view class="goodInfo">
      <view class="pic">
        <image :src="goods_info.goods_pic"></image>
      </view>
      <view class="info">
        <view class="name">
          {{ goods_info.name }}
        </view>
        <view class="sku">
          <view class="skuList">
            <text v-for="(item, index) in goods_info.attr" :key="index">
              {{ item.attr_group_name }}{{ item.attr_name
              }}{{ index == goods_info.attr.length - 1 ? "" : "，" }}
            </text>
          </view>
          <text class="count">×{{ goods_info.num }}</text>
        </view>
        <view class="price">
          <texg>￥</texg>
          <texg>{{ goods_info.total_price }}</texg>
        </view>
      </view>
    </view>
    <view class="score">
      <view class="title">{{ $t("order.goodPoint") }}</view>
      <view class="scoreBox">
        <u-rate
          :count="5"
          v-model="score"
          :min-count="1"
          :size="45"
          active-color="#f84e18"
          inactive-color="#f2f2f2"
          :inactive-icon="'star-fill'"
        ></u-rate>
        <text class="tip">
          {{
            score == 1
              ? $t("order.veryBad")
              : score == 2
              ? $t("order.bad")
              : score == 3
              ? $t("order.general")
              : score == 4
              ? $t("order.good")
              : $t("order.veryGood")
          }}
        </text>
      </view>
    </view>
    <view class="content">
      <view class="title">{{ $t("order.toComment") }}</view>
      <view class="text">
        <textarea
          style="margin-top: 24rpx; width: 100%"
          v-model="content"
          :placeholder="$t('admin.noComment')"
          placeholder-style="color:#ccc;font-size:24rpx;"
        />
      </view>
      <view class="picList">
        <view class="picItem" v-for="(item, index) in pic_list" :key="index">
          <view class="close" @click="delPic(index)">
            <text class="iconfont icon-close"></text>
          </view>
          <image :src="item"></image>
        </view>
        <view class="picItem" @click="chooseImage" v-if="pic_list.length < 6">
          <text class="iconfont icon-camera"></text>
          <text>{{ $t("order.addPic") }}</text>
        </view>
      </view>
    </view>
    <view class="submit" @click="submitComment">{{ $t("home.submit") }}</view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import http from "../../common/http.js";
export default {
  components: { Shenhe },
  data() {
    return {
      // 订单id
      order_id: 0,
      goods_list: null,
      canCommit: true,
      // 商品id
      goods_id: 0,
      // 评论的商品详情
      goods_info: {},
      // 评分
      score: 5,
      // 图片列表
      pic_list: [],
      // 评价内容
      content: ""
    };
  },
  onLoad(t) {
    uni.setNavigationBarTitle({
      title: this.$t("title.orderComment")
    });
    this.order_id = t.id;
    this.goods_info = JSON.parse(t.goods_info);
  },
  watch: {},
  onShow() {
    this.canCommit = true;
  },
  methods: {
    getPreview() {
      var that = this;
      this.$allrequest.order
        .commentPreview({
          order_id: that.order_id,
          type: "mall"
        })
        .then((res) => {
          if (res.code == 0) {
            var goods_list = res.data.goods_list;
            let index = goods_list.findIndex((item) => {
              return item.goods_id == this.goods_id;
            });
            if (index > -1) {
              this.goods_info = goods_list[index];
              this.goods_info.attr = JSON.parse(this.goods_info.attr);
            }
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000
            });
            setTimeout(function () {
              uni.navigateBack({
                delta: 1
              });
            }, 1500);
          }
        });
    },
    chooseImage() {
      this.$utils.uploadImage(
        6 - this.pic_list.length,
        (res) => {
          this.pic_list.push(res);
        },
        () => {},
        ["compressed"]
      );
    },

    submitComment() {
      if (!this.canCommit) {
        return;
      }
      if (this.content == "") {
        uni.showToast({
          title: this.$t("order.noConmment"),
          icon: "none"
        });
        this.canCommit = true;
        return;
      }

      let goods = {};
      goods.score = this.score;
      goods.content = this.content;
      goods.pic_list = this.pic_list;
      goods.order_detail_id = this.goods_info.order_detail_id;
      goods.goods_id = this.goods_info.goods_id;

      this.canCommit = false;
      this.$allrequest.order
        .comment(
          {
            order_id: this.order_id,
            type: "mall",
            goods_list: JSON.stringify([goods])
          },
          true
        )
        .then((res) => {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000
          });
          if (res.code == 0) {
            setTimeout(function () {
              uni.navigateBack({
                delta: 1
              });
            }, 1500);
          }
          this.canCommit = true;
        })
        .catch((err) => {
          this.canCommit = true;
        });
    },
    delPic(index) {
      this.pic_list.splice(index, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #f2f2f2;
  padding-bottom: calc(60rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
}
.comment-box {
  padding-bottom: 100rpx;
  // min-height: 100vh;
  .comment-item {
    margin-bottom: 20rpx;
    background: #fff;
    .goods-info {
      display: flex;
      padding: 30rpx;
      align-items: center;
      > image {
        width: 80rpx;
        height: 80rpx;
      }
    }
    .comment-content {
      display: flex;
      padding: 20rpx;
      flex-wrap: wrap;
    }
    .comment-pic {
      height: 120rpx;
      width: 120rpx;
      margin-right: 10rpx;
      border-radius: 6rpx;
      border: 1rpx solid #f0f0f0;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      color: #aaa;
      overflow: hidden;
      > image {
        width: 120rpx;
        height: 120rpx;
      }
    }
  }
  .comment-submit {
    height: 80rpx;
    line-height: 80rpx;
    background: red;
    color: #fff;
    font-size: 34rpx;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
.goodInfo {
  display: flex;
  padding: 36rpx;
  background-color: #fff;
  .pic {
    width: 160rpx;
    min-width: 160rpx;
    height: 160rpx;
    border-radius: 5px;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    flex: auto;
    margin-left: 20rpx;
    .name {
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 28rpx;
      color: #262626;
      font-family: PingFang SC;
    }
    .sku {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #8c8c8c;
    }
    .price {
      margin-top: 14rpx;
      display: flex;
      align-items: baseline;
      color: #262626;
      font-size: 32rpx;
      font-weight: 600;
      font-family: PingFang SC;
      text:nth-child(1) {
        font-size: 24rpx;
      }
    }
  }
}
.title {
  font-size: 30rpx;
  color: #262626;
  font-weight: 600;
  font-family: PingFang SC;
}
.score {
  padding: 36rpx;
  background-color: #fff;
  margin-top: 24rpx;

  .scoreBox {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    .tip {
      font-size: 24rpx;
      color: #8c8c8c;
      margin-left: 24rpx;
    }
  }
}
.content {
  padding: 36rpx;
  background-color: #fff;
  margin-top: 20rpx;
  .picList {
    display: flex;
    flex-wrap: wrap;
    .picItem {
      margin-top: 20rpx;
      position: relative;
      background-color: #f6f6f6;
      height: 210rpx;
      width: 210rpx;
      margin-right: 24rpx;
      border-radius: 16rpx;
      font-size: 24rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      color: #8c8c8c;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
      .iconfont {
        font-size: 80rpx;
        color: #262626;
      }
      .close {
        z-index: 100;
        position: absolute;
        width: 45rpx;
        height: 45rpx;
        right: 0;
        top: 0;
        border-radius: 0 16rpx 0 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #acacac;
        .iconfont {
          font-size: 28rpx;
          color: #fff;
        }
      }
    }
    .picItem:nth-child(3n) {
      margin-right: 0;
    }
  }
}
.submit {
  width: 680rpx;
  height: 88rpx;
  border-radius: 99px;
  background-color: #f0250e;
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 80rpx auto 0 auto;
}
</style>
